<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>macan所有车型</title>
    <link rel="icon" href="favicon.ico" />
    <link rel="stylesheet" href="./css/base.css" />
    <link rel="stylesheet" href="./font/iconfont.css" />
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/mzzan.css" />
    <script src="./js/index.js"></script>
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet" />

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->

    <!-- <link rel="stylesheet" href="./css/zy.media.min.css"> -->
    <!-- <script src="./js/zy.media.min.js"></script> -->
    <style type="text/css">
      /* #modelView {
            background-color: #DDDDDD;
            z-index: 0;
            opacity: 0.7;
            height: 100%;
            width: 100%;
            position: relative;
        } */

      .playvideo {
        padding-top: auto;
        z-index: 9999;
        position: relative;
        /* width: 300px; */
        /* height: 200px; */
        flex: 60%;
        width: 100%;
        height: 514px;
      }

      .zy_media {
        z-index: 999999999;
      }
    </style>
  </head>

  <body>
    <!-- 头部 -->
    <header class="w">
      <h1 class="logo"><a href="javascript:;"></a></h1>
      <!-- right 下拉菜单 -->
      <div class="menu">
        <form>
          <ul>
            <li><input type="text" placeholder="城市名" /><i class="iconfont icon-icon-test4"></i></li>
            <li><input type="text" placeholder="关键字" /><i class="iconfont icon-icon-search"></i></li>
            <li>
              <a href="javascript:;">车辆配置服务<span class="iconfont icon-arrow-double-right"></span></a>
            </li>
            <li class="bgblue">
              <a href="javascript:;">工具与服务<span class="iconfont icon-jia"></span></a>
            </li>
          </ul>
        </form>
      </div>
      <!-- right 下拉菜单 -->
      <!-- nav 导航 -->
      <div class="nav">
        <ul>
          <li><a href="javascripat:;">所有车型</a></li>
          <li><a href="javascripat:;">保时捷认可易手车</a></li>
          <li><a href="javascripat:;">赛车 & 活动</a></li>
          <li><a href="javascripat:;">个性化与服务</a></li>
          <li><a href="javascripat:;">关于保时捷</a></li>
        </ul>
      </div>
      <!-- nav 导航 -->
    </header>
    <!-- 头部 -->
    <!-- banner 背景图 -->
    <div class="banner">
      <div class="banner_img"></div>
      <div class="txt">
        <h2>Macan 车型</h2>
        <div class="txt_b">
          <div>
            <p class="fs24">545,000 元起*</p>
            <p>制造商建议零售价（含增值税）</p>
          </div>
          <div>
            <p class="fs24">545,000 元起</p>
            <p>制造商建议零售价（含增值税）</p>
          </div>
          <div>
            <p class="fs24">6.7 s</p>
            <p>0 - 100 km/h 加速时间</p>
            <p class="fs24">6.5 s</p>
            <p>0 - 100 km/h 加速时间，搭配 Sport Chrono 组件</p>
          </div>
        </div>
      </div>
    </div>
    <!-- banner 背景图 -->
    <!-- nav2 -->
    <div class="nav2">
      <div class="w">
        <a href="javascript:;">关于 Macan</a>
        <a href="javascript:;">360° 体验</a>
        <a href="javascript:;">车型和规格参数</a>
        <a href="javascript:;">车辆配置器</a>
        <a href="javascript:;">金融计算器</a>
        <a href="javascript:;">特点</a>
        <a href="javascript:;">图库</a>
        <a href="javascript:;">联系人</a>
        <a href="javascript:;">了解更多</a>
      </div>
    </div>
    <!-- nav2 -->
    <div class="nav_tb">
      <div>
        <div class="idea">
          <h2>新款 Macan 的理念</h2>
          <p>我们已经表明不听命于任何人的态度。更非随波逐流。我们更乐意书写属于自己的探险故事。正如这台集运动性、设计和日常实用性于一身的紧凑型 SUV：新款 Macan。</p>
        </div>
      </div>
      <div>
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
          </ol>

          <!-- Wrapper for slides -->
          <div class="carousel-inner" role="listbox">
            <div class="item active">
              <img src="./images/swpper/tb1.webp" alt="..." />
              <div class="carousel-caption"></div>
            </div>
            <div class="item">
              <img src="./images/swpper/tb2.webp" alt="..." />
              <div class="carousel-caption"></div>
            </div>
            <div class="item">
              <img src="./images/swpper/tb3.webp" alt="..." />
              <div class="carousel-caption"></div>
            </div>
          </div>

          <!-- Controls -->
          <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>

        <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
        <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
        <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
      </div>
    </div>

    <div class="video">
      <div>
        <div class="design">
          <h2>设计</h2>
          <p>对我们来说，美学不仅停留于表面。 它始终是个性的表达。</p>
        </div>
      </div>
      <div>
        <video src="./video/porsche-video.mp4" muted="muted" autoplay loop controls="controls" preload="auto"></video>
      </div>
      <!--video 
         <div class="playvideo">
            <div class="zy_media">
                <video data-config='{"mediaTitle": "Macan"}' autoplay>
                    <source src="./video/porsche-video.mp4" type="video/mp4">
                    您的浏览器不支持HTML5视频
                </video>

            </div>
            <div id="modelView">&nbsp;</div>
        </div>
        <script>
            zymedia('video', {
                autoplay: true
            });
        </script> -->
      <!-- video -->
    </div>

    <div class="panorama">
      <div class="lb w">
        <h2></h2>
        <ul>
          <li data-index="0" class="current">外观设计</li>
          <li data-index="1">白天内饰</li>
          <li data-index="2">夜间内饰</li>
        </ul>
      </div>
      <div class="content">
        <div class="current"><img src="./images/swpper/wg.webp" alt="" /></div>
        <div><img src="./images/swpper/bt.webp" alt="" /></div>
        <div><img src="./images/swpper/yj.webp" alt="" /></div>
      </div>
    </div>

    <div class="trait w">
      <div class="trait_left">
        <!-- <div  > -->
        <!-- <img  src="./images/swpper/off.webp" alt=""> -->
        <!-- </div> -->
        <div class="trait_img1"><img src="./images/swpper/on.webp" alt="" /></div>
        <div class="yuan icon1">
          <span class="iconfont icon-houchegai-on"></span>
        </div>
        <div class="yuan yuan_none"><span class="iconfont icon-houchegai-off"></span></div>
      </div>
      <script>
        var icon = document.querySelector(".yuan_none");
        var img = document.querySelector(".trait_left img");
        var trait_img1 = document.querySelector(".trait_img1 img");
        icon.addEventListener("click", function () {
          this.style.display = "none";
          img.src = "./images/swpper/off.webp";
        });
        var icon1 = document.querySelector(".icon1");
        icon1.addEventListener("click", function () {
          icon.style.display = "block";
          img.src = "./images/swpper/on.webp";
        });
      </script>
      <div class="trait_right">
        <div class="trait_txt">
          <h2>我们从不选择妥协、</h2>
          <h2>我们保持特立独行。</h2>
          <h3>1,503 l</h3>
          <p>最大行李箱容积（前排座椅后，至车顶）</p>
        </div>
      </div>
    </div>

    <!-- 尾部 -->
    <div class="w footer_top">
      <div>
        <h2>支持购买</h2>
        <ul>
          <li><a href="#">打造您的保时捷</a></li>
          <li><a href="#">车型比较</a></li>
          <li><a href="#">搜索易手车</a></li>
          <li><a href="#">查找经销商</a></li>
        </ul>
      </div>
      <div>
        <h2>在线服务</h2>
        <ul>
          <li><a href="#">订阅</a></li>
        </ul>
      </div>
      <div>
        <h2>幕后</h2>
        <ul>
          <li><a href="#">赛车 & 活动</a></li>
          <li><a href="#">参观博物馆</a></li>
        </ul>
      </div>

      <div>
        <h2>公司</h2>
        <ul>
          <li><a href="#">新闻发布</a></li>
          <li><a href="#">保时捷速览</a></li>
          <li><a href="#"> 工作机会</a></li>
          <li><a href="#"> 联系信息</a></li>
          <li><a href="#">“Christophorus” 杂志</a></li>
          <li class="six">
            <span class="iconfont icon-linedesign-10"></span>
            <i>主页分享</i>
            <div class="drop-down">
              <ul>
                <li>
                  <a href="javascript:;"><span class="iconfont icon-weibo1"></span></a>
                </li>
                <li>
                  <a href="javascript:;"><span class="iconfont icon-qq"></span></a>
                </li>
                <li>
                  <a href="javascript:;"><span class="iconfont icon-renren"></span></a>
                </li>
                <li>
                  <a href="javascript:;"><span class="iconfont icon-weibo2"></span></a>
                </li>
                <li>
                  <a href="javascript:;"><span class="iconfont icon-souhu"></span></a>
                </li>
                <li>
                  <a href="javascript:;"><span class="iconfont icon-baidu"></span></a>
                </li>
                <li>
                  <a href="javascript:;"><span class="iconfont icon-icon-test5"></span></a>
                </li>
                <li>
                  <a href="javascript:;"><span class="iconfont icon-ertongshouhui-xingxing"></span></a>
                </li>
              </ul>
            </div>
          </li>
          <li class="box50">
            <h2>关注保时捷</h2>
            <a href="javascript:;"><span class="iconfont icon-weibo"></span></a>
            <a href="javascript:;"><span class="iconfont icon-gongzhonghao"></span></a>
            <a href="javascript:;"><span class="iconfont icon-youku"></span></a>
            <a href="javascript:;"><span class="iconfont icon-in"></span></a>
          </li>
        </ul>
      </div>
    </div>
    <footer class="footer_bottom">
      <div class="ipt w">
        <h2>更改国家或地区：</h2>
        <span>选择一个区域</span>
        <span>选择一个国家和地区</span>
      </div>
      <div class="txt w">
        <p>© 2020 保时捷（中国）汽车销售有限公司 <a href="#">法律声明</a> <a href="#">English</a> <a href="沪ICP备10013326号"></a></p>
        <p><img src="./uploads/porsche-normal.png" alt="" /><a href="javascript:;">沪公网安备 31011502014993号</a></p>
        <p>保时捷中国强烈建议您：只在授权的保时捷中心购买车辆和配件。</p>
        <p>请 <a href="#">点击这里</a> 获得更多信息。</p>
        <p><a href="#">环保信息公开</a></p>
      </div>
    </footer>

    <div class="ad">
      <div>
        <img src="./images/swpper/daishuaige.png" alt="" />
        <p>在</p>
        <p>线</p>
        <p>陪</p>
        <p>聊</p>
      </div>
      <div>
        <span>X</span>
        <p>您好，是否有什么可以帮到您的？我们的代文勉大中华销售总裁竭诚为您服务</p>
        <div class="w300 iconfont icon-icon-test4">开始聊天</div>
      </div>
    </div>
    <!-- 尾部 -->
    <script src="./jquery-3.1.1.min.js"></script>
    <script>
      $(function () {
        $(".ad").slideDown().slideUp().fadeIn();
        $("span").click(function () {
          $(".ad").hide();
        });
      });
    </script>
    <script>
//   $('.carousel').carousel({
//   interval: 200
// })
    </script>
    <script>
      var six = document.querySelector(".six");
      var dropDown = document.querySelector(".drop-down");
      six.addEventListener("mouseenter", function () {
        dropDown.style.display = "block";
      });
      six.addEventListener("mouseout", function () {
        dropDown.style.display = "none";
      });
     
 var oTop = $(".nav2").offset().top;
 //获取导航栏的高度，此高度用于保证内容的平滑过渡
 var martop = $('.nav2').outerHeight();

 var sTop = 0;
 // 监听页面的滚动
 $(window).scroll(function () {
     // 获取页面向上滚动的距离
     sTop = $(this).scrollTop();
     // 当导航栏到达屏幕顶端
     if (sTop >= oTop) {
         // 修改导航栏position属性，使之固定在屏幕顶端
         $(".nav2").css({ "position": "fixed", "top": "0" });
         // 修改内容的margin-top值，保证平滑过渡
         $(".content").css({ "margin-top": martop });
     } else {
         // 当导航栏脱离屏幕顶端时，回复原来的属性
         $(".nav2").css({ "position": "static" });
         $(".content").css({ "margin-top": "0" });
     }
 });
    </script>
  </body>
</html>
